<div class="content-section introduction">
    <div class="feature-intro">
        <h1>InputNumber</h1>
        <p>InputNumber is an input component to provide numerical input.</p>
    </div>
    <app-demoActions github="inputnumber" stackblitz="inputnumber-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Numerals</h5>
        <div class="grid p-fluid">
            <div class="field col-12 md:col-3">
                <label for="integeronly">Integer Only</label>
                <p-inputNumber inputId="integeronly" [(ngModel)]="value1">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="withoutgrouping">Without Grouping</label>
                <p-inputNumber [(ngModel)]="value2" mode="decimal" inputId="withoutgrouping" [useGrouping]="false">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="minmaxfraction">Min-Max Fraction Digits</label>
                <p-inputNumber [(ngModel)]="value3" inputId="minmaxfraction" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="5">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="minmax">Min-Max Boundaries</label>
                <p-inputNumber [(ngModel)]="value4" inputId="minmax" mode="decimal" [min]="0" [max]="100">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="locale-user">User Locale</label>
                <p-inputNumber [(ngModel)]="value5" inputId="locale-user" [minFractionDigits]="2">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="locale-us">United States Locale</label>
                <p-inputNumber [(ngModel)]="value6" inputId="locale-us" mode="decimal" locale="en-US" [minFractionDigits]="2">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="locale-german">German Locale</label>
                <p-inputNumber [(ngModel)]="value7" inputId="locale-german" mode="decimal" locale="de-DE" [minFractionDigits]="2">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="locale-indian">Indian Locale</label>
                <p-inputNumber [(ngModel)]="value8" inputId="locale-indian" mode="decimal" locale="en-IN" [minFractionDigits]="2">
                </p-inputNumber>
            </div>
        </div>
        <h5>Currency</h5>
        <div class="grid p-fluid">
            <div class="field col-12 md:col-3">
                <label for="currency-us">United States</label>
                <p-inputNumber [(ngModel)]="value9" inputId="currency-us" mode="currency" currency="USD" locale="en-US">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="currency-germany">Germany</label>
                <p-inputNumber [(ngModel)]="value10" mode="currency" inputId="currency-germany" currency="EUR" locale="de-DE">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="currency-india">India</label>
                <p-inputNumber [(ngModel)]="value11" mode="currency" inputId="currency-india" currency="INR" currencyDisplay="code" locale="en-IN">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="currency-japan">Japan</label>
                <p-inputNumber [(ngModel)]="value12" mode="currency" inputId="currency-japan" currency="JPY" locale="jp-JP">
                </p-inputNumber>
            </div>
        </div>
        <h5>Prefix and Suffix</h5>
        <div class="grid p-fluid">
            <div class="field col-12 md:col-3">
                <label for="mile">Mile</label>
                <p-inputNumber [(ngModel)]="value13" inputId="mile" suffix=" mi">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="percent">Percent</label>
                <p-inputNumber [(ngModel)]="value14" inputId="percent" prefix="%">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="expiry">Expiry</label>
                <p-inputNumber [(ngModel)]="value15" inputId="expiry" prefix="Expires in " suffix=" days">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="temperature">Temperature</label>
                <p-inputNumber [(ngModel)]="value16" prefix="&uarr; " inputId="temperature" suffix="℃" [min]="0" [max]="40">
                </p-inputNumber>
            </div>
        </div>
        <h5>Buttons</h5>
        <div class="grid p-fluid">
            <div class="field col-12 md:col-3">
                <label for="stacked">Stacked</label>
                <p-inputNumber [(ngModel)]="value17" [showButtons]="true" inputId="stacked" mode="currency" currency="USD">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="horizontal">Horizontal with Step</label>
                <p-inputNumber [(ngModel)]="value18" [showButtons]="true" buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="0.25"
                decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR">
                </p-inputNumber>
            </div>
            <div class="field col-12 md:col-3">
                <label for="minmax-buttons">Min-Max Boundaries</label>
                <p-inputNumber [(ngModel)]="value20" mode="decimal" [showButtons]="true" inputId="minmax-buttons" [min]="0" [max]="100">
                </p-inputNumber>
            </div>
        </div>
        <div class="field col-12 md:col-3">
            <label for="vertical" style="display: block">Vertical</label>
            <p-inputNumber [(ngModel)]="value19" [style]="{'width':'4rem'}" [showButtons]="true" buttonLayout="vertical" spinnerMode="vertical" inputId="vertical"
            decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus">
            </p-inputNumber>
        </div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;InputNumberModule&#125; from 'primeng/inputnumber';
</app-code>

            <h5>Getting Started</h5>
            <p>InputNumber is used with the standard v-model directive. Component always provides a number type although formatting on the input is a string.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-inputNumber [(ngModel)]="val"&gt;&lt;/p-inputNumber&gt;
</app-code>

            <h5>Decimal Mode</h5>
            <p>Format is defined using the <i>mode</i> property, "decimal" is the default value allowing only integers when there is no other configuration.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-inputNumber [(ngModel)]="val" mode="decimal"&gt;&lt;/p-inputNumber&gt;
</app-code>
            <p>Fractions are configured with the <i>minFractionDigits</i> property. Optionally <i>maxFractionDigits</i> can be used to defined a boundary for the maximum digits.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-inputNumber [(ngModel)]="val" mode="decimal" [minFractionDigits]="2"&gt;&lt;/p-inputNumber&gt;
&lt;p-inputNumber [(ngModel)]="val" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="2"&gt;&lt;/p-inputNumber&gt;
</app-code>

            <p><i>locale</i> option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per <a href="https://tools.ietf.org/html/rfc5646">BCP Language Tag</a>.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
User Locale
&lt;p-inputNumber [(ngModel)]="value1" mode="decimal" [minFractionDigits]="2"&gt;&lt;/p-inputNumber&gt;

United State Locale
&lt;p-inputNumber [(ngModel)]="value2" mode="decimal" locale="en-US" [minFractionDigits]="2"&gt;&lt;/p-inputNumber&gt;

German Locale
&lt;p-inputNumber [(ngModel)]="value3" mode="decimal" locale="de-DE" [minFractionDigits]="2"&gt;&lt;/p-inputNumber&gt;

Indian Locale
&lt;p-inputNumber [(ngModel)]="value4" mode="decimal" locale="en-IN" [minFractionDigits]="2"&gt;&lt;/p-inputNumber&gt;
</app-code>
            <h5>Currency</h5>
            <p>Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option
                allows how the currency is displayed, valid values are "symbol" (default) or "code".</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
User Locale
&lt;p-inputNumber [(ngModel)]="value1" mode="currency"&gt;&lt;/p-inputNumber&gt;

United State Locale
&lt;p-inputNumber [(ngModel)]="value2" mode="currency" currency="USD" locale="en-US"&gt;&lt;/p-inputNumber&gt;

German Locale
&lt;p-inputNumber [(ngModel)]="value3" mode="currency" currency="EUR" locale="de-DE"&gt;&lt;/p-inputNumber&gt;

Indian Locale
&lt;p-inputNumber [(ngModel)]="value4" mode="currency" currency="INR" locale="en-IN"&gt;&lt;/p-inputNumber&gt;
</app-code>

            <h5>Prefix and Suffix</h5>
            <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
Mile
&lt;p-inputNumber [(ngModel)]="value1" suffix=" mi"&gt;&lt;/p-inputNumber&gt;

Percent
&lt;p-inputNumber [(ngModel)]="value2" prefix="%"&gt;&lt;/p-inputNumber&gt;

Expiry
&lt;p-inputNumber [(ngModel)]="value3" prefix="Expires in " suffix=" days"&gt;&lt;/p-inputNumber&gt;

Temperature
&lt;p-inputNumber [(ngModel)]="value4" prefix="&uarr; " suffix="℃" :min="0" :max="40"&gt;&lt;/p-inputNumber&gt;
</app-code>

            <h5>Buttons</h5>
            <p>Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas
                "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up and down arrow keys can be used to spin the values with keyboard.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
Stacked
&lt;p-inputNumber [(ngModel)]="value1" [showButtons]="true" mode="currency" currency="USD"&gt;&lt;/p-inputNumber&gt;

Horizontal
&lt;p-inputNumber [(ngModel)]="value2" [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
    decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR"&gt;&lt;/p-inputNumber&gt;

Vertical
&lt;p-inputNumber [(ngModel)]="value3" mode="decimal" [showButtons]="true" buttonLayout="vertical" spinnerMode="vertical"
    decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"&gt;&lt;/p-inputNumber&gt;
</app-code>

            <h5>Step</h5>
            <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-inputNumber [(ngModel)]="val" [step]="0.25"&gt;&lt;/p-inputNumber&gt;
</app-code>

            <h5>Min and Max Boundaries</h5>
            <p>Value to be entered can be restricted by configuring the <i>min</i> and <i>max</i> options.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-inputNumber [(ngModel)]="val" [min]="0" [max]="100"&gt;&lt;/p-inputNumber&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>value</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Value of the component.</td>
                        </tr>
                        <tr>
                            <td>format</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to format the value.</td>
                        </tr>
                        <tr>
                            <td>showButtons</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Displays spinner buttons.</td>
                        </tr>
                        <tr>
                            <td>buttonLayout</td>
                            <td>string</td>
                            <td>stacked</td>
                            <td>Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".</td>
                        </tr>
                        <tr>
                            <td>incrementButtonClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the increment button.</td>
                        </tr>
                        <tr>
                            <td>decrementButtonClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the decrement button.</td>
                        </tr>
                        <tr>
                            <td>incrementButtonIcon</td>
                            <td>string</td>
                            <td>pi pi-chevron-up</td>
                            <td>Style class of the increment button.</td>
                        </tr>
                        <tr>
                            <td>decrementButtonIcon</td>
                            <td>string</td>
                            <td>pi pi-chevron-down</td>
                            <td>Style class of the decrement button.</td>
                        </tr>
                        <tr>
                            <td>locale</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Locale to be used in formatting.</td>
                        </tr>
                        <tr>
                            <td>localeMatcher</td>
                            <td>string</td>
                            <td>best fit</td>
                            <td>The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit".
                                See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation">Locale Negotation</a> for details.
                            </td>
                        </tr>
                        <tr>
                            <td>mode</td>
                            <td>string</td>
                            <td>decimal</td>
                            <td>Defines the behavior of the component, valid values are "decimal" and "currency".</td>
                        </tr>
                        <tr>
                            <td>prefix</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Text to display before the value.</td>
                        </tr>
                        <tr>
                            <td>suffix</td>
                            <td>string</td>
                            <td>decimal</td>
                            <td>Text to display after the value.</td>
                        </tr>
                        <tr>
                            <td>currency</td>
                            <td>string</td>
                            <td>null</td>
                            <td>The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency codes</a>,
                                such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
                                There is no default value; if the style is "currency", the currency property must be provided.</td>
                        </tr>
                        <tr>
                            <td>currencyDisplay</td>
                            <td>string</td>
                            <td>symbol</td>
                            <td>How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €,
                                ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".</td>
                        </tr>
                        <tr>
                            <td>useGrouping</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.</td>
                        </tr>
                        <tr>
                            <td>minFractionDigits</td>
                            <td>number</td>
                            <td>null</td>
                            <td>The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of
                                minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that information).</td>
                        </tr>
                        <tr>
                            <td>maxFractionDigits</td>
                            <td>number</td>
                            <td>null</td>
                            <td>The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain
                                number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting
                                is the larger of minimumFractionDigits and the number of minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a>
                                (2 if the list doesn't provide that information).</td>
                        </tr>
                        <tr>
                            <td>min</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Mininum boundary value.</td>
                        </tr>
                        <tr>
                            <td>max</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum boundary value.</td>
                        </tr>
                        <tr>
                            <td>step</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Step factor to increment/decrement the value.</td>
                        </tr>
                        <tr>
                            <td>allowEmpty</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Determines whether the input field is empty.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>inputId</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Identifier of the focus input to match a label defined for the component.</td>
                        </tr>
                        <tr>
                            <td>inputStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the input field.</td>
                        </tr>
                        <tr>
                            <td>placeholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Advisory information to display on input.</td>
                        </tr>
                        <tr>
                            <td>size</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Size of the input field.</td>
                        </tr>
                        <tr>
                            <td>maxlength</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum number of character allows in the input field.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Specifies tab order of the element.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the element should be disabled.</td>
                        </tr>
                        <tr>
                            <td>readonly</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that an input field is read-only.</td>
                        </tr>
                        <tr>
                            <td>title</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Title text of the input text.</td>
                        </tr>
                        <tr>
                            <td>ariaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Used to define a string that labels the input element.</td>
                        </tr>
                        <tr>
                            <td>ariaRequired</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Used to indicate that user input is required on an element before a form can be submitted.</td>
                        </tr>
                        <tr>
                            <td>name</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the input field.</td>
                        </tr>
                        <tr>
                            <td>autocomplete</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Used to define a string that autocomplete attribute the current element.</td>
                        </tr>
                        <tr>
                            <td>showClear</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, a clear icon is displayed to clear the value.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Methods</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>getFormatter</td>
                            <td>-</td>
                            <td>Returns Intl.NumberFormat object.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onFocus</td>
                            <td>event: Browser event</td>
                            <td>Callback to invoke when input receives focus.</td>
                        </tr>
                        <tr>
                            <td>onBlur</td>
                            <td>event: Browser event</td>
                            <td>Callback to invoke when input loses focus.</td>
                        </tr>
                        <tr>
                            <td>onInput</td>
                            <td>event.originalEvent: Browser event <br />
                                event.value: New value</td>
                            <td>Callback to invoke when the value is entered.</td>
                        </tr>
                        <tr>
                            <td>onClear</td>
                            <td>-</td>
                            <td>Callback to invoke when input field is cleared.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-inputnumber</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>p-inputnumber-stacked</td>
                            <td>Container element with stacked buttons.</td>
                        </tr>
                        <tr>
                            <td>p-inputnumber-horizontal</td>
                            <td>Container element with horizontal buttons.</td>
                        </tr>
                        <tr>
                            <td>p-inputnumber-vertical</td>
                            <td>Container element with vertical buttons.</td>
                        </tr>
                        <tr>
                            <td>p-inputnumber-input</td>
                            <td>Input element</td>
                        </tr>
                        <tr>
                            <td>p-inputnumber-button</td>
                            <td>Input element</td>
                        </tr>
                        <tr>
                            <td>p-inputnumber-button-up</td>
                            <td>Increment button</td>
                        </tr>
                        <tr>
                            <td>p-inputnumber-button-down</td>
                            <td>Decrement button</td>
                        </tr>
                        <tr>
                            <td>p-inputnumber-button-icon</td>
                            <td>Button icon</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/inputnumber" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-inputnumber-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="grid p-fluid"&gt;
&lt;h5&gt;Numerals&lt;/h5&gt;
&lt;div class="grid p-fluid"&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="integeronly"&gt;Integer Only&lt;/label&gt;
        &lt;p-inputNumber inputId="integeronly" [(ngModel)]="value1"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="withoutgrouping"&gt;Without Grouping&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value2" mode="decimal" inputId="withoutgrouping" [useGrouping]="false"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="minmaxfraction"&gt;Min-Max Fraction Digits&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value3" inputId="minmaxfraction" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="5"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="minmax"&gt;Min-Max Boundaries&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value4" inputId="minmax" inputId="minmax" mode="decimal" [min]="0" [max]="100"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="locale-user"&gt;User Locale&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value5" inputId="locale-user" [minFractionDigits]="2"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="locale-us"&gt;United States Locale&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value6" inputId="locale-us" mode="decimal" locale="en-US" [minFractionDigits]="2"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="locale-german"&gt;German Locale&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value7" inputId="locale-german" mode="decimal" locale="de-DE" [minFractionDigits]="2"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="locale-indian"&gt;Indian Locale&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value8" inputId="locale-indian" mode="decimal" locale="en-IN" [minFractionDigits]="2"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Currency&lt;/h5&gt;
&lt;div class="grid p-fluid"&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="currency-us"&gt;United States&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value9" inputId="currency-us" mode="currency" currency="USD" locale="en-US"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="currency-germany"&gt;Germany&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value10" mode="currency" inputId="currency-germany" currency="EUR" locale="de-DE"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="currency-india"&gt;India&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value11" mode="currency" inputId="currency-india" currency="INR" currencyDisplay="code" locale="en-IN"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="currency-japan"&gt;Japan&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value12" mode="currency" inputId="currency-japan" currency="JPY" locale="jp-JP"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Prefix and Suffix&lt;/h5&gt;
&lt;div class="grid p-fluid"&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="mile"&gt;Mile&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value13" inputId="mile" suffix=" mi"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="percent"&gt;Percent&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value14" inputId="percent" prefix="%"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="expiry"&gt;Expiry&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value15" inputId="expiry" prefix="Expires in " suffix=" days"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="temperature"&gt;Temperature&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value16" prefix="&uarr; " inputId="temperature" suffix="℃" [min]="0" [max]="40"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Buttons&lt;/h5&gt;
&lt;div class="grid p-fluid"&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="stacked"&gt;Stacked&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value17" [showButtons]="true" inputId="stacked" mode="currency" currency="USD"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="horizontal"&gt;Horizontal with Step&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value18" [showButtons]="true" buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="0.25"
        decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
    &lt;div class="field col-12 md:col-3"&gt;
        &lt;label for="minmax-buttons"&gt;Min-Max Boundaries&lt;/label&gt;
        &lt;p-inputNumber [(ngModel)]="value20" mode="decimal" [showButtons]="true" inputId="minmax-buttons" [min]="0" [max]="100"&gt;
        &lt;/p-inputNumber&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="field col-12 md:col-3"&gt;
    &lt;label for="vertical" style="display: block"&gt;Vertical&lt;/label&gt;
    &lt;p-inputNumber [(ngModel)]="value19" [showButtons]="true" buttonLayout="vertical" spinnerMode="vertical" inputId="vertical"
    decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"&gt;
    &lt;/p-inputNumber&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class InputNumberDemo &#123;
    value1: number = 42723;

    value2: number = 58151;

    value3: number = 2351.35;

    value4: number = 50;

    value5: number = 151351;

    value6: number = 115744;

    value7: number = 635524;

    value8: number = 732762;

    value9: number = 1500;

    value10: number = 2500;

    value11: number = 4250;

    value12: number = 5002;

    value13: number = 20;

    value14: number = 50;

    value15: number = 10;

    value16: number = 20;

    value17: number = 20;

    value18: number = 10.50;

    value19: number = 25;

    value20: number = 50;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-inputnumber-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
